<script lang="ts">
import { defineComponent, reactive, ref, toRaw } from "vue";
import { useList } from "@/hooks/page";
import {
  guider_info_comment_header_api,
  guider_info_comment_list_api,
} from "@/package/guider/api/guider_didi";

import PageSticky from "@/components/page/sticky.vue";
import ListEmpty from "@/components/list/empty.vue";
import ListMore from "@/components/list/more.vue";
import IndexCommentItem from "./index-comment-item.vue";

export default defineComponent({
  components: { PageSticky, ListEmpty, ListMore, IndexCommentItem },
  props: {
    id: { type: String, required: true },
    isTeam: Boolean,
  },
  setup(props) {
    const tempData = {
      queryData: { guider_id: "", work_id: "", group_type: 1 },
    };
    if (props.isTeam) {
      tempData.queryData.work_id = props.id;
    } else {
      tempData.queryData.guider_id = props.id;
    }

    guider_info_comment_header_api(tempData.queryData).then((resp) => {
      totalData.score = resp.score;
      totalData.num_user = resp.num_user;
      if (resp.num > 0) {
        typeList.value.push({ id: 0, name: `全部 ${resp.num}` });
      }
      if (resp.has_img_num > 0) {
        typeList.value.push({ id: 2, name: `有图 ${resp.has_img_num}` });
      }
      if (resp.score5count > 0) {
        typeList.value.push({ id: 4, name: `好评 ${resp.score5count}` });
      }
      if (resp.score4count > 0) {
        typeList.value.push({ id: 5, name: `中差评 ${resp.score4count}` });
      }
    });

    const totalData = reactive({ score: "", num_user: "" });

    const queryData = reactive({ type: 0, sort: 1 });
    const sortList = [
      { id: 1, name: "最新" },
      { id: 2, name: "综合排序" },
    ];
    const sortClick = (id: number) => {
      queryData.sort = id;
      reloadList();
    };
    const typeList = ref<any[]>([]);
    const typeClick = (id: number) => {
      queryData.type = id;
      reloadList();
    };

    const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
      useList({ page: 1, page_size: 10 }, (query) => {
        return guider_info_comment_list_api({
          ...query,
          ...tempData.queryData,
          ...toRaw(queryData),
        });
      });
    reloadList();

    return {
      totalData,
      queryData,
      sortList,
      sortClick,
      typeList,
      typeClick,
      listData,
      listStatus,
      listLoadMore,
      loadMoreList,
    };
  },
});
</script>

<template>
  <scroll-view
    class="comment"
    scroll-y
    @scroll="listLoadMore = true"
    @scrolltolower="loadMoreList"
  >
    <PageSticky>
      <view class="comment-info">
        <view class="comment-info-score">
          {{ totalData.score
          }}<text class="comment-info-score2"
            >/分&nbsp; 共有{{ totalData.num_user }}位用户评价</text
          >
        </view>

        <view class="comment-info-sort">
          <template v-for="(i, d) of sortList" :key="i.id">
            <view class="comment-info-sort2" v-if="d !== 0"></view>
            <view
              class="comment-info-sort3"
              :class="{ 'comment-info-sort4': queryData.sort === i.id }"
              @click="sortClick(i.id)"
            >
              {{ i.name }}
            </view>
          </template>
        </view>
      </view>

      <scroll-view
        class="comment-type"
        v-if="typeList.length > 0"
        scroll-x
        enhanced
        :show-scrollbar="false"
      >
        <view class="comment-type-space"></view>
        <view
          class="comment-type-item"
          :class="{ 'comment-type-active': queryData.type === i.id }"
          v-for="i of typeList"
          :key="i.id"
          @click="typeClick(i.id)"
        >
          {{ i.name }}
        </view>
      </scroll-view>
    </PageSticky>

    <view class="comment-empty" v-if="typeList.length === 0">
      <ListEmpty />
    </view>
    <template v-else>
      <view class="comment-data">
        <view class="comment-data-item" v-for="(i, d) of listData" :key="i.id">
          <view class="comment-data-line" v-if="d !== 0"></view>
          <IndexCommentItem :info="i" />
        </view>
      </view>
      <ListMore v-if="listLoadMore" :status="listStatus" safeAreaInsetBottom />
    </template>
  </scroll-view>
</template>

<style lang="scss">
.comment {
  position: relative;
  height: 100%;

  .comment-info {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx 14rpx;
  }

  .comment-info-score {
    font-size: 44rpx;
    color: #ff7900;
    line-height: 60rpx;
    font-weight: bold;
  }

  .comment-info-score2 {
    margin-left: 2rpx;
    font-size: 26rpx;
    color: #666666;
    line-height: 46rpx;
    font-weight: 400;
  }

  .comment-info-sort {
    display: flex;
    align-items: center;
    padding-top: 6rpx;
    margin-left: auto;
  }

  .comment-info-sort2 {
    height: 28rpx;
    margin: 0 16rpx;
    border-left: 2rpx solid #999999;
  }

  .comment-info-sort3 {
    font-size: 24rpx;
    color: #666666;
    line-height: 48rpx;
  }

  .comment-info-sort4 {
    color: #ff7900;
    font-weight: bold;
  }

  .comment-type {
    height: 80rpx;
    white-space: nowrap;
  }

  .comment-type-space,
  .comment-type-item {
    display: inline-block;
    vertical-align: top;
  }

  .comment-type-space {
    width: 30rpx;
  }

  .comment-type-item {
    padding: 0 22rpx;
    margin-top: 16rpx;
    margin-right: 20rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 50rpx;
    border-radius: 26rpx;
    background-color: #f7f7f7;
  }

  .comment-type-active {
    color: #ff7900;
    font-weight: bold;
  }

  .comment-empty {
    height: calc(100% - 100rpx);
  }

  // .comment-data {
  //   padding-top: 30rpx;
  // }

  .comment-data-item {
    position: relative;
  }

  .comment-data-line {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    border-bottom: 10rpx solid #f6f6f6;
  }
}
</style>